'use client';
import { useState, useEffect, Suspense } from 'react';
import TeamSetup from '../TeamSetup';
import QuizQuestion from '../QuizQuestion';

export default function Quiz({ params }: { params: { id: string } }) {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <QuizContent quizId={Number(params.id)} />
    </Suspense>
  );
}

function QuizContent({ quizId }: { quizId: number }) {
  const [quizStarted, setQuizStarted] = useState(false);
  const [teamName, setTeamName] = useState('');

  useEffect(() => {
    // Store quiz ID in localStorage when it's available
    if (quizId) {
      localStorage.setItem('currentQuizId', String(quizId));
      
      // Update existing team data with the current quiz ID if it exists
      const savedTeamData = localStorage.getItem('quizTeamData');
      if (savedTeamData) {
        const teamData = JSON.parse(savedTeamData);
        
        // If team data exists and matches this quiz, auto-start
        if (teamData.quizId === quizId && teamData.name) {
          setTeamName(teamData.name);
          
          // Small delay to ensure everything is properly initialized
          setTimeout(() => {
            setQuizStarted(true);
          }, 300);
        }
        
        localStorage.setItem('quizTeamData', JSON.stringify({
          ...teamData,
          quizId
        }));
      }
    }
  }, [quizId]);

  const handleStartQuiz = () => {
    if (teamName.trim()) {
      setQuizStarted(true);
    }
  };

  return (
    <div className="max-w-2xl mx-auto">
      {!quizStarted ? (
        <TeamSetup
          teamName={teamName}
          setTeamName={setTeamName}
          handleStartQuiz={handleStartQuiz}
          quizId={quizId}
        />
      ) : (
        <QuizQuestion 
          teamName={teamName} 
          initialQuestionNumber={1} // This value will be overridden by auto-sync with the admin's current question
          quizId={quizId}
        />
      )}
    </div>
  );
}